<template>
  <div>
    <!-- <div>
      {{ data }}
    </div>

    <div>
      {{ steps }}
    </div>

    <div>
      {{ buttons }}
    </div> -->

    <van-row>
      <van-col span="4">&nbsp;</van-col>
      <van-col span="16">
        <van-steps :active="active">
          <van-step v-for="(st, name) in steps2" :key="name">
            {{ st.string }}
          </van-step>
        </van-steps>
      </van-col>
    </van-row>

    <van-row>
      <van-col span="4">&nbsp;</van-col>
      <van-col span="16">
        <div>
          <span>
            <van-button
              v-for="(btn, index) in buttons2"
              :key="index"
              :type="btn.btn_type"
              size="mini"
              @click="onclick(index, btn)"
            >
              {{ btn.string }}
            </van-button>
          </span>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Dialog } from 'vant'

export default {
  name: 'ViewPopup',

  // components: { ViewCell },

  props: {
    //
    data: { type: String, default: '' },

    steps: {
      type: Object,
      default: () => {
        return {}
      }
    },
    buttons: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  data() {
    return {
      //
      // active: 1
    }
  },
  computed: {
    //
    steps2() {
      return this.filterButtonsOrStates(this.steps)
    },

    buttons2() {
      return this.filterButtonsOrStates(this.buttons)
    },

    active() {
      const index = Object.keys(this.steps2).findIndex(
        item => item === this.data
      )
      // console.log('active', index, this.data, this.steps2)
      return index
    }
  },

  async created() {},

  mounted() {
    // console.log('ViewPopup, config,', this.config.name, this.config)
    // console.log('ViewPopup, data,', this.data)
  },

  methods: {
    onclick(name, payload) {
      //
      console.log('onclick, , ok,')
      //
      Dialog.confirm({
        title: '确认',
        message: payload.message
      })
        .then(() => {
          console.log('onclick, ok,')
          this.$emit('button-click', name, payload)
        })
        .catch(() => {
          console.log('onclick, cancel,')
        })
    },
    filterButtonsOrStates(allData) {
      const checkShowBtnOrState = item => {
        if (item.states && !item.states.includes(this.data)) {
          return false
        } else if (item.invisible && item.invisible.includes(this.data)) {
          return false
        }
        return true
      }

      const btns = Object.keys(allData).reduce((acc, cur) => {
        const show = checkShowBtnOrState(allData[cur])
        // console.log('filterButtonsOrStates', cur, show, this.data, allData[cur])
        if (show) {
          acc[cur] = allData[cur]
        }
        return acc
      }, {})
      return btns
    }
  }
}
</script>

<style type="text/css"></style>
